<template>
	<div class="flex gap-[10px] flex-1">
		<div v-for="(item, k) in columns" :key="k" class="w-full">
			<div class="flex flex-col">
				<div v-for="(col, i) in item" :key="i">
					<slot name="default" :item="col as any"></slot>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps({
	list: Array as any,
	lg: Number as any,
	md: Number as any,
	sm: Number as any
})

const colsNumber: any = computed(() => {
	let cols = 6
	if (window.innerWidth >= 1028) {
		cols = 6
	} else if (window.innerWidth >= 992) {
		cols = 4
	} else if (window.innerWidth < 768) {
		cols = 2
	} else if (window.innerWidth < 375) {
		cols = 1
	}
	return cols
})

const columns = computed(() => {
	const result: number[][] = Array.from({ length: Number(colsNumber.value) }, () => [])
	let oddNumber = 0
	let i = 0
	const oddItem = props.list?.length % 6

	if (oddItem !== 0) {
		oddNumber = 1
	}
	const totalItemPerCol = (props.list?.length - oddItem) / Number(colsNumber.value)

	props.list.forEach((item: any, index: any) => {
		if (index !== 0 && result[i].length >= totalItemPerCol + oddNumber && i < result.length - 1) {
			if (i >= oddItem - 1) {
				oddNumber = 0
			}
			i += 1
		}
		result[i].push(item)
	})

	return result
})
</script>
